<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<!-- 
		  子传父:
		  1.在父模板中的子组件的标签上绑定一个自定义事件
		    <son @sondata="getdata"></son>
		  2.在父组件的methods中定义一个方法处理自定义事件
		    getdata(val) {
		    }
		  3.在子组件的methods中触发自定义事件
		    this.$emit('sondata', this.name)
		-->
		<style type="text/css">
			.father {
				background-color: orange;
				height: 300px;
			}

			.son {
				background-color: greenyellow;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<father></father>
		</div>
		<!-- 父组件模板 -->
		<template id="father">
			<div class="father">
				<h3>父组件:{{name}}</h3>
				//sondata自定义事件
				//@click鼠标单击事件
				<son @sondata="getdata" @click.native="fn"></son>
			</div>
		</template>
		<!-- 子组件模板 -->
		<template id="son">
			<div class="son">
				<h3>子组件</h3>
				<button @click="send">发送数据给父组件</button>
			</div>
		</template>
		<script type="text/javascript">
			let vm = new Vue({
				el: '#app',
				components: {
					//父组件
					father: {
						template: '#father',
						data() {
							return {
								name: ''
							}
						},
						methods: {
							getdata(val) {
								console.log("父组件中的getdata方法")
								console.log("这是子组件传给我的数据:" + val)
								this.name = val
							},
							fn() {
								console.log("--------");
							}
						},
						components: {
							//子组件
							son: {
								template: '#son',
								data() {
									return {
										name: "这是子组件的数据"
									}
								},
								methods: {
									send() {
										console.log("子组件中的send方法")
										/*
										  调用自定义事件:
										  参数1:自定义事件名称
										  其它参数:要传递的数据
										*/
										this.$emit('sondata', this.name)
									}
								}
							}
						}
					}
				}
			})
		</script>
	</body>
</html>
